<template>
  <div class="cinemas" ref="container">
    <!-- 两端对齐 -->
    <van-sticky>
      <van-nav-bar
        :title="
          this.$route.params.movieName ? this.$route.params.movieName : '影院'
        "
      >
        <template #left>
          <van-cell
            title="长沙"
            is-link
            arrow-direction="down"
            to="cityselect"
            color="black"
          />
        </template>
        <template #right>
          <van-icon name="search" size="24" color="black" />
        </template>
      </van-nav-bar>

      <van-dropdown-menu active-color="rgb(255,97,25)">
        <van-dropdown-item title="全城" ref="item1">
          <template #default>
            <ul class="citybox">
              <li>
                <div
                  v-for="(item, index) in list1"
                  :value="item"
                  :key="index"
                  @click="cityselect($event, item.name)"
                  :class="{ active: active == item.name }"
                >
                  {{ item.name }}
                </div>
              </li>
              <li>
                <div
                  v-for="(item, index) in list2"
                  :value="item"
                  :key="index"
                  @click="cityselect($event, item.name)"
                  :class="{ active: active == item.name }"
                >
                  {{ item.name }}
                </div>
              </li>
              <li style="justify-content: flex-start">
                <div
                  v-for="(item, index) in list3"
                  :value="item"
                  :key="index"
                  @click="cityselect($event, item.name)"
                  :class="{ active: active == item.name }"
                  style="margin-left: 10px"
                >
                  {{ item.name }}
                </div>
              </li>
            </ul>
          </template>
        </van-dropdown-item>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </van-sticky>
    <AllCinemas :cinemas="cinemas" :movieId="movieId" />
  </div>
</template>

<script>
import { getCinemas, getCinemasByMovieId } from "@/api/cinemas.js"
import AllCinemas from "./allCinemas.vue"

export default {
  props: ["movieId"],
  components: { AllCinemas },
  data() {
    return {
      container: null,
      cinemas: [],
      list1: [
        { name: '全城' },
        { name: '开福区' },
        { name: '芙蓉区' },
        { name: '天心区' }
      ],
      list2: [
        { name: '岳麓区' },
        { name: '雨花区' },
        { name: '望城区' },
        { name: '长沙县' }
      ],
      list3: [
        { name: '宁乡县' },
        { name: '浏阳市' }
      ],
      active: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: 'APP订票', value: 0 },
        { text: '前台兑换', value: 1 }
      ],
      option2: [
        { text: '最近去过', value: 'a' },
        { text: '离我最近', value: 'b' }
      ]
    }
  },
  async created() {
    if (this.movieId) {
      await this.getCinemasListByMovieId(this.movieId)
    } else {
      await this.getCinemasList()
    }
  },
  mounted() {
    this.container = this.$refs.container
  },
  methods: {
    async getCinemasList() {
      const res = await getCinemas(70)
      this.cinemas = res.data.data.cinemas.cinemas
      console.log(this.cinemas)
    },
    async getCinemasListByMovieId(movieId) {
      const res = await getCinemasByMovieId(movieId)
      this.cinemas = res.data.data.cinemas.cinemas
      console.log(this.cinemas)
    },
    cityselect(e, text) {
      this.$refs.item1.toggle()
      this.$refs.item1.title = text
      this.active = text
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon {
  color: black;
  font-size: 12px;
}
.van-tabs--line .van-tabs__wrap {
  border-bottom: 1px solid rgb(245, 245, 245);
}
.bj {
  flex-direction: row-reverse;
  color: rgb(255, 97, 25);
  justify-content: flex-end;
}
.citybox {
  width: 100%;
  height: 150px;
  padding: 10px 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.citybox li {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.citybox li div {
  width: 90px;
  height: 30px;
  border: 1px solid rgb(245, 245, 245);
  border-radius: 4px;
  color: rgb(121, 125, 130);
  text-align: center;
  line-height: 30px;
}
.name {
  font-size: 16px;
  color: black;
  font-weight: 500;
}
.money {
  font-size: 18px;
  color: rgb(240, 64, 58);
}

.active {
  color: rgb(255, 97, 25) !important;
  border-color: rgb(255, 97, 25) !important;
}
</style>
